import { defineStore } from 'pinia'
import { DeviceEnum, SidebarStatus } from '@/enums/index.js'
import { STORAGE_KEYS } from '@/constants/index.js'
import { useStorage } from '@vueuse/core'
import { reactive } from 'vue'
import { defaultSettings } from '@/settings.js'

export const useAppStore = defineStore('app', () => {
  // 设备类型
  const device = useStorage(STORAGE_KEYS.DEVICE, DeviceEnum.DESKTOP);
  // 布局大小
  const size = useStorage(STORAGE_KEYS.SIZE, defaultSettings.size);
  // 侧边栏状态
  const sidebarStatus = useStorage(STORAGE_KEYS.SIDEBAR_STATUS, SidebarStatus.CLOSED);
  const sidebar = reactive({
    opened: sidebarStatus.value === SidebarStatus.OPENED,
    withoutAnimation: false,
  });

  // 关闭侧边栏
  function closeSideBar() {
    sidebar.opened = false;
    sidebarStatus.value = SidebarStatus.CLOSED;
  }

  // 打开侧边栏
  function openSideBar() {
    sidebar.opened = true;
    sidebarStatus.value = SidebarStatus.OPENED;
  }

  // 切换设备
  function toggleDevice(val) {
    device.value = val;
  }

  /**
   * 改变布局大小
   *
   * @param val 布局大小 default | small | large
   */
  function changeSize(val) {
    size.value = val;
  }

  return {
    device,
    sidebar,
    toggleDevice,
    closeSideBar,
    openSideBar,
    changeSize
  }
})
